@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 1px, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, -2px, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@keyframes puzzle-1 {
  30% {
    transform: translate3d(100px, 100px, 0) rotate(20deg);
  }

  60% {
    transform: translate3d(-40px, 0, 0) rotate(30deg);
  }

  100% {
    transform: translate3d(10px, 0, 0) rotate(40deg);
  }
}

@keyframes puzzle-2 {
  50% {
    transform: translate3d(-100px, 0, 0);
  }

  100% {
    transform: translate3d(-3px, 95px, 0) rotate(5deg) scale(0.86);
  }
}

@keyframes puzzle-3 {
  100% {
    transform: translate3d(25px, -3px, 0) rotate(216deg);
  }
}

@keyframes puzzle-4 {
  50% {
    transform: translate3d(-100px, -50px, 0) rotate(20deg);
  }
  100% {
    transform: translate3d(-18px, -120px, 0) rotate(48deg);
  }
}


@keyframes popupShowMask {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popupShowMain {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes popupHiddenMask {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes popupHiddenMain {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.6);
    opacity: 0;
  }
}
